<template>
	<view class="work-container">
		<!-- 搜索框 -->
		<uni-search-bar @confirm="handleEnter" @cancel="cancel" v-model="bookName" placeholder="搜索图书" />
		<template v-for="item in bookList">
			<uni-card :title="item.name" :extra="item.author" :thumbnail="item.url" @click="onClick(item)">
				<text class="item-introduction">{{item.introduction}}</text>
			</uni-card>
		</template>
		<p v-if='bookList.length===total && total!=0'
			style="color: #ccc;font-size: 14px;opacity: 0.7;text-align: center;">
			------我是有底线的------
		</p>
		<p v-else style="color: #ccc;font-size: 14px;opacity: 0.7;text-align: center;">
			{{ total!=0&&'下拉加载'||'' && !bookList.length>0}}
		</p>
		<!-- <p v-else-if="" style="color: #ccc;font-size: 14px;opacity: 0.7;text-align: center;">
			{{ total===0&&'暂无该图书' && !bookList.length===0}}
		</p> -->
	</view>
</template>

<script>
	import {
		getBookInfo,
	} from '../../api/work/work';
	export default {
		onLoad: function() {
			this.getTheBookList()
			uni.startPullDownRefresh();
		},
		onReachBottom: function() {
			if (this.total !== this.bookList.length) {
				setTimeout(() => {
					this.queryForm.pageNum++
					this.getTheBookList(this.queryForm)
				}, 500)
			}
		},
		data() {
			return {
				avatar: '',
				bookList: [],
				total: 0,
				bookName: '',
				queryForm: {
					pageNum: 1,
					pageSize: 6,
					searchByName: ''
				}
			}
		},
		methods: {
			onClick({
				bookId
			}) {
				uni.navigateTo({
					url: `/pages/work/detail/index?bookId=${bookId}`,
				})
			},
			getTheBookList() {
				getBookInfo(this.queryForm).then(res => {
					this.total = res.total
					if (res.rows.length > 0) {
						this.bookList = [...this.bookList, ...res.rows];
					}
				})
			},
			handleEnter() {
				this.queryForm.searchByName = this.bookName
				this.queryForm.pageNum = 1
				getBookInfo(this.queryForm).then(res => {
					this.total = res.total
					this.bookList = res.rows
				})
			},
			cancel() {
				this.queryForm.pageNum = 1
				this.queryForm.searchByName = ""
				getBookInfo(this.queryForm).then(res => {
					this.total = res.total
					this.bookList = res.rows
				})
			}
		},
		watch: {
			'bookName': {
				handler(val) {
					console.log(val === '');
					if (val === '') {
						this.bookList = []
						this.total = 0
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.item-introduction {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}
</style>